<template>
  <div class="now-weather">
    <div>
      <h3>最后更新时间:{{updataTime}}</h3>
      <p>
        <span class="color-red">{{location.name}}</span>
        未来24小时的天气情况</p>
    </div>
      <div class="chart-container" ref="chartContainer"></div>
  </div>
</template>

<script>
echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);
import axios from "axios";
import * as echarts from 'echarts/core';
import { GridComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import dayjs from 'dayjs';
import { KEY, API_24H } from "../common/constrant";
import { mapState } from 'vuex'


export default {
    data(){
      return{
        hourly:[],
        hourWeatherData:{
          fxTime:[],
          temp:[],
        },
        updataTime:""
      };
    },
    //计算属性
    computed:{
      // location:function(){
      //   return this.$store.state.location;
      // }
      ...mapState([
        "location"
      ])
    },
    methods: {
    getData(){
      axios
      .get(API_24H,{
        params: {
          // location: "101270101",
          location: this.location.id,
          key: KEY,
        },
      })
      .then((res) => {
        console.log(res.data);
        this.hourly = res.data.hourly;
        this.updataTime = dayjs (res.data.updateTime).format ("YYYY-MM-DD HH:mm:ss");

        this.hourWeatherData.fxTime = []
        this.hourWeatherData.temp = []

        this.hourly.forEach((element) => {
          this.hourWeatherData.fxTime.push(element.fxTime);
          this.hourWeatherData.temp.push(element.temp);
        });

        // let fxTimeHH = []
        // fxTimeHH = this.hourWeatherData.fxTime.map (element=>dayjs(element).format("HH"))
        // console.log("-------------"+fxTimeHH)
        // // this.initChart(this.hourWeatherData.fxTime,this.hourWeatherData.temp)

        // this.initChart(fxTimeHH,this.hourWeatherData.temp)
        this.initChart(
          this.hourWeatherData.fxTime.map((element) =>
          dayjs(element).format("HH")
          ),
          this.hourWeatherData.temp
      );
    });
    },
    initChart(xAxisData, seriesData){
      var chartDom = this.$refs.chartContainer
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        xAxis: {
        type: 'category',
        data: xAxisData,
        },
        yAxis: {
          type: 'value'
          },
          series: [
            {
              data: seriesData,
              type: 'line'
              }
              ]
              };
              option && myChart.setOption(option);
              }
           },
              mounted() {
                this.getData();
              },
              //添加侦听器
              watch:{
                location:function(){
                  this.getData()
                }
              }
            };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.chart-container{
  height: 20rem;
}
span.color-red{
  color: red;
}
</style>
